{layout name="common/layout"/}

<style>
  .index_cont .section_1 .s1_tab .tab:hover {
    background: #12257c;
    color: #fff;
  }
  .index_cont .section_1 .s1_tab .tab.active {
    background: #12257c;
  }
  .index_cont .section_1 .s1_tab .tab {
    transition: 0.25s;
    background: #eee;
    color: #000;
  }
  ::-webkit-scrollbar {
    width: 1px;
    height: 1px;
  }
  * {
    padding: 0;
    margin: 0;
  }
  #container_cont {
    height: 100%; /*纵向满屏*/
    width: 100vw; /*横向满屏*/
    scroll-snap-type: y mandatory; /*按Y轴纵向滚动*/
    overflow-y: scroll; /*当Y值变化时采取滚动处理*/
    overflow-x: hidden; /*隐藏横行滚动*/
  }
  .home-pages {
    scroll-snap-align: start; /*每次滚动后停在下一页面的开始位置*/
    height: 100%; /*纵向满屏*/
    width: 100%; /*横向满屏*/
    overflow: hidden;
  }
  .section_1_bg .text {
    text-align: center;
    color: #fff !important;
  }
  .index_banner .swiper {
    height: 100%;
  }
  .index_banner .swiper .swiper-slide .image {
    height: 100%;
  }
  .index_cont .title::after {
    background: #12257c;
  }
  /* 轮播按钮 */
  .index_banner .swiper .swiper-slide .more {
    background: #12257c;
    box-shadow: 0px 2px 10px #333;
  }
  .index_banner .swiper .swiper-slide .more a {
    background: #12257c;
    border-radius: 10px;
  }
  .index_cont .section_2 .s2_cont .right .more {
    background: #12257c;
  }
  .index_banner .swiper .swiper-slide .image img {
    margin-top: 0px;
  }
  .index_banner .swiper .swiper-slide .more a:hover {
    box-shadow: 2px 2px 10px #333;
  }
  /* 产品 */
  .index_cont .section_1_bg {
    background: url("/assets/addons/cms/xnr/image/index_product_1.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .section_1_bg .product_title {
    font-weight: 800;
    color: #fff;
    padding: 0 10px;
    text-align: center;
  }
  .section_1_bg .product_subhead {
    color: #999;
    margin-top: 15px;
    padding: 0 10px;
    text-align: center;
  }
  .s1_cont .tab_cont {
    justify-content: space-around !important;
  }
  .s1_cont .tab_cont .img_bg {
    border-radius: 3px;
    background-color: #fff;
    overflow: hidden;
  }
  .s1_cont .tab_cont .img_bg .img {
    height: 100%;
  }
  .s1_cont .tab_cont .img_bg img {
    height: 100%;
    object-fit: contain;
    overflow: hidden;
    transition: 0.25s;
    object-fit: cover;
  }
  .s1_cont .tab_cont .img_bg:hover img {
    height: 110%;
  }
  @media only screen and (max-width: 768px) {
    .section_1_bg {
      padding: 0;
    }
    .section_1_bg .product_title {
      font-size: 40px;
    }
    .index_cont .section_1 .s1_tab {
      margin-top: 20px;
    }
    .section_1_bg .product_subhead {
      font-size: 20px;
      line-height: 40px;
    }
    .s1_cont .tab_cont .img_bg img {
      height: 200px;
      object-fit: contain;
    }
    .s1_cont .tab_cont .img_bg {
      height: 200px;
    }
  }
  @media only screen and (min-width: 768px) and (max-width: 1200px) {
    .section_1_bg {
      padding: 20px 0 !important;
    }
    .section_1_bg .product_title {
      font-size: 40px;
    }
    .index_cont .section_1 .s1_tab {
      margin-top: 20px;
    }
    .section_1_bg .product_subhead {
      font-size: 20px;
      line-height: 40px;
    }
    .s1_cont .tab_cont .img_bg {
      height: 200px;
    }
  }
  @media only screen and (min-width: 1200px) and (max-width: 1400px) {
    .section_1_bg {
      padding: 20px 0 !important;
    }
    .section_1_bg .product_title {
      font-size: 40px;
    }
    .index_cont .section_1 .s1_tab {
      margin-top: 20px;
    }
    .section_1_bg .product_subhead {
      font-size: 20px;
      line-height: 40px;
    }
    .s1_cont .tab_cont .img_bg {
      height: 200px;
    }
  }
  @media only screen and (min-width: 1400px) {
    .section_1_bg .product_title {
      font-size: 60px;
    }
    .section_1_bg .product_subhead {
      font-size: 30px;
      line-height: 60px;
    }
    .s1_cont .tab_cont .img_bg {
      height: 280px;
    }
  }
  /* 合作伙伴 */
  .index_cont .section_3_bg {
    background: url("/assets/addons/cms/xnr/image/index-partner.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .section_3_bg .card_title {
    font-weight: 800;
    color: #fff;
    padding: 0 10px;
  }
  .section_3_bg .card_subhead {
    color: #999;
    margin-top: 15px;
    padding: 0 10px;
  }
  .section_3_bg .card_sub_title {
    font-size: 16px;
    color: #fff;
    line-height: 36px;
    padding: 0 10px;
    width: 60%;
  }
  .section_3_bg #swiper-wrapper-fd {
    display: grid;
    justify-content: space-between;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
  }
  #swiper-wrapper-fd .swiper-slide {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  #swiper-wrapper-fd .swiper-slide img {
    width: 100%;
    height: 100%;
    margin: 0;
    vertical-align: baseline;
  }
  .index_cont .section_3 .swiper1 {
    height: 350px;
  }
  @media only screen and (max-width: 768px) {
    .section_3_bg {
      padding: 0;
    }
    .section_3_bg .card_title {
      font-size: 40px;
    }
    .section_3_bg .card_subhead {
      font-size: 20px;
      line-height: 40px;
    }
    #swiper-wrapper-fd {
      width: calc(2 * 125px + 1 * 20px);
      grid-template-columns: repeat(2, 125px);
      grid-template-rows: repeat(4, 70px);
    }
  }
  @media only screen and (min-width: 768px) and (max-width: 1200px) {
    .section_3_bg {
      padding: 20px 0 !important;
    }
    .section_3_bg .card_title {
      font-size: 40px;
    }
    .section_3_bg .card_subhead {
      font-size: 20px;
      line-height: 40px;
    }
    #swiper-wrapper-fd {
      width: calc(4 * 145px + 3 * 20px);
      grid-template-columns: repeat(4, 145px);
      grid-template-rows: repeat(2, 90px);
    }
  }
  @media only screen and (min-width: 1200px) and (max-width: 1400px) {
    .section_3_bg {
      padding: 20px 0 !important;
    }
    .section_3_bg .card_title {
      font-size: 40px;
    }
    .section_3_bg .card_subhead {
      font-size: 20px;
      line-height: 40px;
    }
    #swiper-wrapper-fd {
      width: calc(4 * 145px + 3 * 20px);
      grid-template-columns: repeat(4, 145px);
      grid-template-rows: repeat(2, 90px);
    }
  }
  @media only screen and (min-width: 1400px) {
    .section_3_bg .card_title {
      font-size: 60px;
    }
    .section_3_bg .card_subhead {
      font-size: 30px;
      line-height: 60px;
    }
    #swiper-wrapper-fd {
      width: calc(4 * 180px + 3 * 20px);
      grid-template-columns: repeat(4, 180px);
      grid-template-rows: repeat(2, 100px);
    }
  }
</style>
<div class="index_cont" id="container_cont">
  <div class="index_banner home-pages">
    <div class="swiper">
      <div class="swiper-wrapper">
        {cms:blocklist id="item" name="banner" orderby="weigh"}
        <a class="swiper-slide" href="{$item.url}">
          <div class="image">
            <img src="{$item.image}" class="middle w100 h100" alt="" />
          </div>
          <div class="cont">
            <!-- <div class="text">{$item.title}</div> -->
            <!-- <div class="text_en">{$item.en}</div> -->
            <!-- <div class="more"><a href="{$item.url}">了解更多+</a></div> -->
          </div>
        </a>
        {/cms:blocklist}
      </div>
      <div class="swiper-button-prev"></div>
      <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
      <div class="swiper-button-next"></div>
      <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
      <div class="swiper-pagination"></div>
      <!--分页器。如果放置在swiper外面，需要自定义样式。-->
    </div>
  </div>
  <div class="section_1_bg home-pages">
    <div class="section_1 w1300">
      <div class="product_title">产品中心</div>
      <div class="product_subhead">product center</div>
      <div class="s1_tab disflex">
        {cms:channellist id="sub" type="son" typeid="90"}
        <div class="tab {if $key=='0'} active{/if}">{$sub.name}</div>
        {/cms:channellist}
      </div>
      <div class="s1_cont">
        {cms:channellist id="sub" type="son" typeid="90"}
        <div class="tab_cont">
          {cms:arclist id="item" type="sons" channel="sub.id" orderby="weigh"}
          <a class="list" href="{$item.url}" target="_blank">
            <div class="img_bg">
              <div class="img">
                <img src="{$item.image}" class="w100 h100 middle" alt="" />
              </div>
              <!-- <div class="more"><a href="{$item.url}">查看详情+</a></div> -->
            </div>
            <div class="text">{$item.title}</div>
          </a>
          {/cms:arclist}
        </div>
        {/cms:channellist}
        <!-- <div class="details"><a href="/product.html">查看详情+</a></div> -->
      </div>
    </div>
  </div>
  <!-- <div class="section_2_bg home-pages">
    <div class="section_2 w1300">
      <div class="title">关于我们</div>
      <div class="subhead">about us</div>
      <div class="s2_cont disflex flex_lmr">
        <div class="left">
          <img
            src="__ADDON__/xnr/image/banner_7.jpg"
            class="w100 h100"
            alt=""
          />
        </div>
        <div class="right">
          <div class="name">浙江欣挪瑞海洋科技有限公司</div>
          <div class="name_en">
            ZHEJIANG SUNGLORY OCEAN TECHNOLOGY CO., LTD.
          </div>
          <div class="text">
            浙江欣挪瑞海洋科技有限公司自成立以来，一直聚焦于船舶及海洋领域。公司拥有稳定的研发队伍，专注于电子海图引擎及船舶智能操作系统等行业基础软件的研发，以“让每一艘船舶都有一个智慧大脑”的使命，秉承“求实、创新、协同、共享”的价值观，致力于打造船舶及海洋数字化、智能化生态圈，为智能船舶的发展赋能，推动我国高端船舶产业的发展。
          </div>
          <div class="more"><a href="/p/about.html">查看详情+</a></div>
        </div>
      </div>
    </div>
  </div> -->
  <div class="section_3_bg home-pages">
    <div class="section_3 w1300">
      <div class="card_title">合作伙伴</div>
      <div class="card_subhead">Cooperative Partner</div>
      <div class="card_sub_title">
        欣挪瑞有幸与各行各业的合作伙伴共同探索海洋科技的未来。我们秉承创新、合作、共赢的价值观，与众多优秀企业携手，致力于为客户提供卓越的海洋科技解决方案。
      </div>
      <div class="s3_cont">
        <div class="swiper1">
          <div class="swiper-wrapper" id="swiper-wrapper-fd">
            {cms:blocklist id="item" name="par" orderby="weigh"}
            <div class="swiper-slide">
              <img
                src="{$item.image}"
                title="{$item.title}"
                class="middle"
                alt=""
              />
            </div>
            {/cms:blocklist}
          </div>
        </div>
        <!-- <div class="swiper-button-prev2"></div> -->
        <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
        <!-- <div class="swiper-button-next2"></div> -->
        <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
      </div>
    </div>
  </div>
</div>

<script>
  var mySwiper = new Swiper(".swiper", {
    pagination: {
      el: ".swiper-pagination",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    loop: true,
    autoplay: true,
  });
</script>

<script>
  var scrollContainer = document.getElementById("container_cont");
  var snapItems = document.querySelectorAll(".home-pages");

  var observer = new IntersectionObserver(
    function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          console.log("元素进入视图：", entry.target);
          window.scrollTo({
            top: document.getElementById("container"),
          });
        }
      });
    },
    { threshold: 0.5 }
  );

  snapItems.forEach(function (item) {
    observer.observe(item);
  });
</script>
